<!-- 测试拖拽 -->
<template>
    <div id="dropFromBox" draggable="true">拖拽我</div>
    <div id="dropToBox">放置区域</div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
    const dropFromBox = document.getElementById('dropFromBox')
    dropFromBox.addEventListener('dragstart', () => {
        console.log('开始拖动');
    })
    dropFromBox.addEventListener('drag', () => {
        console.log('拖动中');
    })
    dropFromBox.addEventListener('dragend', () => {
        console.log('结束拖动');
    })

    const dropToBox = document.getElementById('dropToBox')
    dropToBox.addEventListener('dragover', (e) => {
        console.log(e);
        e.preventDefault()
    })
})
</script>

<style scoped>
#dropToBox {
    width: 200px;
    height: 200px;
    background: #fcc;
    margin: 50px auto;
}
</style>